<template>
	<div class="detail-wrap main-wrap">
		<div class="link">
			<a href="javascript:;">
				<i class="el-icon-arrow-left"></i>
				返回
			</a>
		</div>
		<!-- 产品信息 -->
		<div class="cont-main">
			<!-- 图片 -->
			<ZoomImage class="zoom-box" :imgs="goodDetail.imgs || []" />
			<div class="good-infor">
				<h1 class="title">{{ goodDetail.title }}</h1>
				<div class="supplier">{{ goodDetail.supplier }}</div>
				<div class="price">&yen;{{ goodDetail.priceStr }}</div>
				<!-- 评分 -->
				<el-rate :value="4.9" disabled show-score text-color="#ff9900">
				</el-rate>
				<!-- 加入购物车 -->
				<el-button
					class="btn"
					icon="el-icon-shopping-cart-full"
					type="danger"
					@click="addGood"
				>
					加入购物车
				</el-button>
			</div>
		</div>
		<!-- 相关产品列表 -->
		<div class="goodlist">
			<h2>相似商品推荐</h2>
			<GoodsList :proList="prolist" />
		</div>
	</div>
</template>
<script>
import ZoomImage from "./ZoomImage.vue";
import GoodsList from "@/components/goods/GoodsList.vue";
// 导入请求数据函数
import { getDetail, getSame, postAdd } from "@/api";

import { mapState } from "vuex";
export default {
	name: "DetailsPage",
	data() {
		return {
			goodDetail: {}, //产品详情
			prolist: [], //产品列表
		};
	},
	created() {
		// console.log(this.$route.query.id);
		// console.log("created");
	},
	activated() {
		// console.log("activated");
	},
	computed: {
		...mapState(["token"]),
	},
	methods: {
		// 执行加入购物车
		addGood() {
			// 判断用户有没登录
			// console.log(this.$store.state.token);
			if (this.token) {
				// 添加购物车
				postAdd({
					token: this.token,
					goodId: this.goodDetail.Id,
				}).then((res) => {
					// console.log(res);
					// 添加成功
					if (res.code == 1) {
						this.$message({
							message: "加入购物车成功",
							type: "success",
						});
					} else if (res.code == 0) {
						// token后台验证未通过会加入失败
						this.$alert({
							message: "登录已过期",
						});
					} else {
						this.$message.error("失败，请稍后再试");
					}
				});
			} else {
				this.$message({
					message: "请先执行登录，三秒后自动跳转登录",
					type: "warning",
				});
				setTimeout(() => {
					this.$router.push("/signin");
				}, 3000);
			}
		},
	},
	// 第一次数据请求在路由守卫
	beforeRouteEnter(to, from, next) {
		to, from;
		// console.log(to.query.id);
		// 请求数据
		getDetail({ goodId: to.query.id }).then((result) => {
			// console.log(result[0]);
			// 将图片数据字符串转成数据
			let good = result[0];
			good.imgs = JSON.parse(good?.imgs);
			// console.log(good);
			// 获取商铺同类商铺
			// console.log(good.supplier);
			getSame({ supplier: good.supplier }).then((rs) => {
				// console.log(rs);
				next((vm) => {
					// 响应式对象
					vm.goodDetail = {};
					vm.goodDetail = Object.assign({}, vm.goodDetail, good);
					vm.prolist = [];
					vm.prolist.push(...rs);
				});
			});
		});
	},
	// 路由更新数据请求
	beforeRouteUpdate(to, from, next) {
		to, from;
		// 请求数据
		getDetail({ goodId: to.query.id }).then((result) => {
			// console.log(result[0]);
			let good = result[0];
			good.imgs = JSON.parse(good.imgs);
			// 获取商铺同类商铺
			// console.log(good.supplier);
			getSame({ supplier: good.supplier }).then((rs) => {
				// console.log(rs);
				this.goodDetail = {};
				this.goodDetail = Object.assign({}, this.goodDetail, good);
				this.prolist = [];
				this.prolist.push(...rs);
			});
		});
		next();
	},
	components: {
		ZoomImage,
		GoodsList,
	},
};
</script>
<style scoped lang="scss">
.link {
	margin: 20px 0;
}
.cont-main {
	display: flex;
	.zoom-box {
		width: 400px;
	}
	.good-infor {
		padding-left: 200px;
		line-height: 60px;
		font-size: 18px;
		.title {
			font-size: 20px;
		}
		.price {
			font-size: 30px;
			color: red;
		}
		.btn {
			margin-top: 100px;
		}
	}
}
.goodlist {
	line-height: 40px;
	margin: 20px 0;
	border-bottom: 1px solid #ddd;
}
</style>
